<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f" %>

<div class="modal fade" id="modalCropForm" tabindex="-1" role="dialog" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <f:form action="account/cropPhoto" cssClass="form-horizontal modal-content" id="idCropForm" role="form">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Редактор фото</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <img src="<c:url value="/resources/images/testjcrop.jpg" />" id="newPhoto" alt="[Jcrop Example]"/>

                    <div id="preview-pane">
                        <div class="preview-container">
                            <img src="<c:url value="/resources/images/testjcrop.jpg" />" class="jcrop-preview" alt="Preview"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Применить" class="btn btn-primary"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
            </div>
        </f:form>
    </div>
</div>

<link href="<c:url value="/resources/css/jquery.Jcrop.min.css" />" rel="stylesheet"/>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.Jcrop.min.js" />"></script>
<script type="text/javascript">
    var boundx, boundy,
            $pcnt = $('#preview-pane .preview-container'),// Grab some information about the preview pane
            $pimg = $('#preview-pane .preview-container img'),
            xsize = $pcnt.width(),
            ysize = $pcnt.height();
    $('#newPhoto').Jcrop({
        allowSelect: false,
        aspectRatio: 1,
        //onSelect: updatePreview,
        onChange: updatePreview
    }, function () {
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        this.setSelect([50, 50, 100, 100]);
        $('#preview-pane').appendTo(this.ui.holder);
    });
    function updatePreview(c) {
        if (parseInt(c.w) > 0) {
            var rx = xsize / c.w;
            var ry = ysize / c.h;
            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    }
    $('#modalCropForm').modal('show');
    $('.jcrop-keymgr').remove();
</script>

<style type="text/css">
    #preview-pane {
        display: block;
        position: absolute;
        z-index: 2000;
        right: -200px;
        background-color: white;
    }

    #preview-pane .preview-container {
        width: 150px;
        height: 150px;
        overflow: hidden;
    }
</style>
